<template>
    <section class="form-container">
        <el-form :inline="true" :model="filter" size="mini" class="form-filter">
            <el-form-item label="消息类型">
                <el-select v-model="filter.messageType" filterable placeholder="请选择" @change="getTemplateList()" clearable>
                    <el-option
                        v-for="item in Dict.enums.messageType"
                        :key="item.code"
                        :label="item.name"
                        :value="item.code"
                    />
                </el-select>
            </el-form-item>

            <el-form-item label="消息模版">
                <el-select v-model="filter.templateId" filterable placeholder="请选择" clearable>
                    <el-option
                        v-for="item in templateList"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"
                    />
                </el-select>
            </el-form-item>

            <el-form-item label="结果">
                <el-select v-model="filter.result" filterable placeholder="请选择" clearable>
                    <el-option key="true" label="成功" value="true"/>
                    <el-option key="false" label="失败" value="false"/>
                </el-select>
            </el-form-item>

            <el-form-item label="接收人">
                <el-input v-model="filter.recipient" placeholder="请输入条件查询"/>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="getPage()" icon="el-icon-search">查询</el-button>
            </el-form-item>
        </el-form>
        <div class="form-content">
            <el-table
                v-loading="loading"
                style="width: 100%"
                :data="page.records"
                border
                stripe
                :header-cell-style = "headerCellStyle"
            >
                <el-table-column prop="id" label="ID" width="60"/>
                <el-table-column prop="messageTypeName" label="消息类型" width="120"/>
                <el-table-column prop="templateName" label="模版名称" width="120"/>
                <el-table-column prop="recipient" label="接收人" width="120"/>
                <el-table-column prop="messageData" label="消息参数"/>
                <el-table-column prop="templateContent" label="消息示例内容"/>
                <el-table-column prop="result" label="结果" width="70px">
                    <template #default="scope">
                        <el-tag v-if="scope.row.result" type="success">成功</el-tag>
                        <el-tag v-else type="danger">失败</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="resultDescription" label="结果描述"/>

                <el-table-column width="80" prop="updateName" label="更新人"/>
                <el-table-column width="160" prop="updateTime" label="更新时间"/>

<!--                <el-table-column fixed="right" label="操作">-->
<!--                    <template #default="scope">-->
<!--                        &lt;!&ndash;                        <el-button size="mini" style="margin:0 0px 10px 10px;" @click="showUpdate(scope.row)">编辑&ndash;&gt;-->
<!--                        &lt;!&ndash;                        </el-button>&ndash;&gt;-->

<!--                        &lt;!&ndash;                        <el-popconfirm title="确定删除吗？" @onConfirm="handleDelete(scope.row.id)">&ndash;&gt;-->
<!--                        &lt;!&ndash;                            <el-button slot="reference" size="mini" style="margin:0 0px 10px 10px;">删除&ndash;&gt;-->
<!--                        &lt;!&ndash;                            </el-button>&ndash;&gt;-->
<!--                        &lt;!&ndash;                        </el-popconfirm>&ndash;&gt;-->

<!--                    </template>-->
<!--                </el-table-column>-->
            </el-table>

            <el-pagination
                background
                :current-page="page.current"
                :page-sizes="[10, 20, 30, 50,100]"
                :page-size="page.size"
                layout="total, sizes, prev, pager, next, jumper"
                :total="page.total"
                style="margin-top:20px;"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
            />

            <!--            <Update ref="updateRef" @refresh="getPage()"/>-->
        </div>
    </section>
</template>
<script>
import {TemplateApi} from "@/api/message/TemplateApi";
import {MessageRecordApi} from "@/api/message/MessageRecordApi";


export default {
    name: 'MessageRecordList',
    components: {
        // Update
    },
    data() {
        return {
            page: {
                total: 0,
                size: 10,
                current: 1,
                pages: 0,
                records: []
            },
            filter: {
                messageType: '',
                templateId: '',
                result: '',
                recipient: ''
            },
            loading: false,
            messageTypeList: [],
            templateList: [],
            headerCellStyle:{
                "background-color":"#F2F5FC"
            }
        }
    },
    created() {
        this.getPage()
    },
    methods: {
        // 获取用户列表
        getPage() {
            const params = {
                pageIndex: this.page.current,
                pageSize: this.page.size,

                messageTypeId: this.filter.messageTypeId,
                serviceProviderId: this.filter.serviceProviderId,
                templateId: this.filter.templateId,
                result: this.filter.result,

                recipient: this.filter.recipient

            }

            this.loading = true
            MessageRecordApi.getPage(params)
                .then((response) => {
                    this.page = response
                    this.loading = false
                }).catch((err) => {
                this.loading = false
            })
        },

        handleSizeChange(val) {
            this.page.size = val
            this.page.current = 1
            this.getPage()
        },

        handleCurrentChange(val) {
            this.page.current = val
            this.getPage()
        },
        getTemplateList(){
            this.filter.templateId=""
            if(!this.filter.messageType){
                this.templateList=[]
                return false
            }
            TemplateApi.getEnableList(this.filter.messageType).then((response) => {
                this.templateList = response[0].templateList
            })
        }
    }
}

</script>

<style lang="scss" scoped></style>
